<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>百度新闻首页</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
	<div class="container">
		<header class="clearfix">
			<a href="#" class="logo"><span class="iconfont">&#x3487;</span></a>
			<a href="#" class="user"><span class="iconfont">&#xe63d;</span></a>
			<a href="#" class="more"><span class="iconfont">&#xe626;</span></a>
			<a href="#" class="search"><span class="iconfont">&#xe604;</span></a>
			
		</header>
		<nav>
			<ul>
				<li><a href="#" class="cur_show">推荐</a><i></i></li>
				<li><a href="#">百家</a><i></i></li>
				<li><a href="#">本地</a><i></i></li>
				<li><a href="#">图片</a><i></i></li>
				<li><a href="#">娱乐</a><i></i></li>
				<li><a href="#">社会</a><i></i></li>
				<li><a href="#">军事</a><i></i></li>
				<li><a href="#">互联网</a><i></i></li>
				<li><a href="#">科技</a><i></i></li>
				<li><a href="#">女人</a><i></i></li>
				<li><a href="#">更多</a><i></i></li>
			</ul>
		</nav>
		<article class="news-main">
			<ul class="news-lists">
				<!-- 这里自动添加新闻 -->
			</ul>
		</article>
	</div>
	<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// body...
			var deviceWidth =$('body').width();
			$('nav li').each(function (index,item) {
				// body...
				// 此处开始判断导航栏中li的长度，大于两个字，显示为屏幕的1/3，小于或等于为1/6
				if ($(this).find('a').html().split('').length>2) {
					$(this).width(deviceWidth/3);
				} else {
					$(this).width(deviceWidth/6);
				}
			})
		})
	</script>
	<script type="text/javascript" src="js/news.js"></script>
</body>
</html>